<template>
  <div class="question-footer">
    <div
      class="card-nav nav"
      @click="goTestCard"
    >
      答题卡
    </div>
    <div class="sep" />
    <div
      class="prev qnav nav"
      :class="{disabled: !canGoPrev}"
      @click="goPrev"
    >
      <van-icon name="arrow-left" />上一题
    </div>
    <div class="sep" />
    <div
      v-if="notShowSumbit"
      class="next qnav nav"
      :class="{disabled: !canGoNext}"
      @click="goNext"
    >
      下一题<van-icon name="arrow" />
    </div>
    <div
      v-else
      class="next qnav nav"
      @click="onClickSubmit"
    >
      交卷<van-icon name="arrow" />
    </div>
  </div>
</template>

<script lang="ts">
import mixins from 'vue-typed-mixins'
import testSubmit from '@/mixins/testSubmit'
export default mixins(testSubmit).extend({
  props: {
    questionInfo: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
    },
    qlength: {
      type: Number,
      default: 0,
    },
    showAnswer: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    notShowSumbit (): boolean {
      return this.$route.name === 'exercises' || this.showAnswer || this.index !== this.qlength - 1
      // return !(this.$route.query.showAnswer !== '1' && this.index === this.qlength - 1)
    },
    canGoPrev () {
      if (this.index === 0) {
        return false
      }
      const limitNum = this.$store.state.instInfo.TryQuestionCount
      if (limitNum === -1 ||
        this.$store.state.userInfo.UserId !== '-1') {
        return true
      }
      if (limitNum + 1 >= this.questionInfo.Sequence) {
        return true
      }
      return false
    },
    canGoNext () {
      if (this.index + 1 === this.qlength) {
        return false
      }
      const limitNum = this.$store.state.instInfo.TryQuestionCount
      if (limitNum === -1 ||
        this.$store.state.userInfo.UserId !== '-1') {
        return true
      }
      if (limitNum - (this.$store.state.question.RightCount || 0) >= this.questionInfo.Sequence) {
        return true
      }
      return false
    },
  },
  methods: {
    goPrev () {
      if (this.canGoPrev) {
        this.$emit('goPrev')
      }
    },
    goNext () {
      if (this.canGoNext) {
        this.$emit('goNext')
      }
    },
    goTestCard () {
      this.$emit('goTestCard')
    },
    onClickSubmit () {
      this.$dialog.confirm({
        message: '确定要交卷吗？',
      }).then(() => {
        this.onSubmit(false)
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.question-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: $examFooterInH5;
  font-size: 32px;
  background: #fff;
  @include px1border(top, #D9D9D9);
  .van-icon {
    vertical-align: middle;
  }
}
.nav {
  flex: 1;
  height: $examFooterInH5;
  line-height: $examFooterInH5;
  text-align: center;
  position: relative;
  @include active;
}
.sep {
  width: 1px;
  height: 66px;
  // background: #D9D9D9;
  @include px1border(left, #D9D9D9);
}
.qnav {
  color: $primary-web;
}
.disabled {
  color: #999;
}
.card-nav {
  color: #333;
}
</style>
